<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50">

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">

        <!-- 左侧区域 (3列) -->
        <div class="lg:col-span-3 space-y-6">
          <!-- 开店铺卡片 -->
          <div class="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300">
            <div class="relative h-48 bg-gradient-to-br from-emerald-400 to-cyan-500">
              <div class="absolute inset-0 bg-black/20"></div>
              <div class="absolute inset-0 flex flex-col justify-center items-center text-white p-6">
                <div class="bg-white/20 backdrop-blur-sm rounded-full p-4 mb-4">
                  <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                  </svg>
                </div>
                <h3 class="text-xl font-bold mb-2 text-center">开启商业之旅</h3>
                <p class="text-sm text-center opacity-90">成为社区商家，展示特色产品</p>
              </div>
            </div>
            <div class="p-6">
              <button class="w-full bg-gradient-to-r from-emerald-500 to-cyan-500 hover:from-emerald-600 hover:to-cyan-600 text-white font-semibold py-3 px-4 rounded-xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-lg">
                <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
                立即开店
              </button>
              <p class="text-xs text-gray-500 mt-3 text-center">免费开店，轻松管理</p>
            </div>
          </div>

          <!-- 分类筛选 -->
          <div class="bg-white rounded-2xl shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
              <svg class="w-5 h-5 mr-2 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
              </svg>
              店铺分类
            </h3>
            <div class="space-y-2">
              <button v-for="category in categories" :key="category.id" 
                      :class="['w-full text-left px-4 py-3 rounded-xl transition-all duration-200', 
                               selectedCategory === category.id ? 'bg-indigo-100 text-indigo-700 font-medium' : 'hover:bg-gray-50 text-gray-700']"
                      @click="selectedCategory = category.id">
                <span class="text-lg mr-3">{{ category.icon }}</span>
                {{ category.name }}
                <span class="float-right text-sm text-gray-500">({{ category.count }})</span>
              </button>
            </div>
          </div>

          <!-- 热门推荐 -->
          <div class="bg-white rounded-2xl shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
              <svg class="w-5 h-5 mr-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z"></path>
              </svg>
              热门推荐
            </h3>
            <div class="space-y-3">
              <div v-for="hot in hotStores" :key="hot.id" 
                   class="flex items-center p-3 rounded-xl hover:bg-gray-50 transition-colors cursor-pointer"
                   @click="handleViewStore(hot.id)">
                <img :src="hot.avatar" :alt="hot.name" class="w-12 h-12 rounded-full object-cover">
                <div class="ml-3 flex-1">
                  <h4 class="font-medium text-gray-900 text-sm">{{ hot.name }}</h4>
                  <p class="text-xs text-gray-500">{{ hot.category }}</p>
                </div>
                <div class="text-right">
                  <div class="flex items-center text-yellow-500 text-xs">
                    <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
                    </svg>
                    {{ hot.rating }}
                  </div>
                  <p class="text-xs text-gray-400">{{ hot.sales }}销量</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间区域 (6列) -->
        <div class="lg:col-span-6 space-y-6">
          <!-- 加载状态 -->
          <div v-if="loading" class="flex justify-center items-center py-20">
            <div class="text-center">
              <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500 mx-auto mb-4"></div>
              <p class="text-gray-500">正在加载精彩店铺...</p>
            </div>
          </div>

          <!-- 店铺列表 -->
          <div v-else class="space-y-6">
            <div v-for="store in filteredStores" :key="store.id" 
                 class="bg-white rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden group">
              
              <!-- 店铺头部 -->
              <div class="relative h-48 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
                <img v-if="store.coverImage" :src="store.coverImage" :alt="store.name" 
                     class="w-full h-full object-cover">
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
                
                <!-- 店铺基本信息 -->
                <div class="absolute bottom-4 left-4 right-4 text-white">
                  <div class="flex items-end space-x-4">
                    <img :src="store.avatar" :alt="store.name" 
                         class="w-16 h-16 rounded-full border-4 border-white shadow-lg">
                    <div class="flex-1">
                      <h3 class="text-xl font-bold mb-1">{{ store.name }}</h3>
                      <p class="text-sm opacity-90">{{ store.description }}</p>
                    </div>
                    <button @click="handleFollowStore({ storeId: store.id, following: !store.isFollowing })"
                            :class="['px-4 py-2 rounded-full text-sm font-medium transition-all duration-200',
                                     store.isFollowing ? 'bg-white/20 text-white' : 'bg-white text-gray-900 hover:bg-gray-100']">
                      {{ store.isFollowing ? '已关注' : '关注' }}
                    </button>
                  </div>
                </div>

                <!-- 店铺标签 -->
                <div class="absolute top-4 right-4">
                  <span v-if="store.isHot" class="bg-red-500 text-white px-3 py-1 rounded-full text-xs font-medium">
                    🔥 热门
                  </span>
                </div>
              </div>

              <!-- 店铺内容 -->
              <div class="p-6">
                <!-- 店铺统计 -->
                <div class="grid grid-cols-4 gap-4 mb-6">
                  <div class="text-center">
                    <div class="text-2xl font-bold text-indigo-600">{{ store.rating }}</div>
                    <div class="text-xs text-gray-500">评分</div>
                  </div>
                  <div class="text-center">
                    <div class="text-2xl font-bold text-green-600">{{ store.sales }}</div>
                    <div class="text-xs text-gray-500">销量</div>
                  </div>
                  <div class="text-center">
                    <div class="text-2xl font-bold text-purple-600">{{ store.products }}</div>
                    <div class="text-xs text-gray-500">商品</div>
                  </div>
                  <div class="text-center">
                    <div class="text-2xl font-bold text-orange-600">{{ store.followers }}</div>
                    <div class="text-xs text-gray-500">关注</div>
                  </div>
                </div>

                <!-- 热门商品 -->
                <div class="mb-6">
                  <h4 class="text-lg font-semibold text-gray-900 mb-3">热门商品</h4>
                  <div v-if="store.hotProducts && store.hotProducts.length > 0" class="grid grid-cols-5 gap-2">
                    <div v-for="product in store.hotProducts.slice(0, 5)" :key="product.id" 
                         class="group cursor-pointer transform hover:-translate-y-1 transition-all duration-300" 
                         @click="handleViewProduct(product.id, store.id)">
                      <div class="aspect-square rounded-lg overflow-hidden bg-gray-100 mb-1 shadow-sm group-hover:shadow-md transition-shadow duration-300">
                        <img :src="product.image" 
                             :alt="product.name" 
                             class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                             @error="handleImageError">
                      </div>
                      <h5 class="text-xs font-medium text-gray-900 truncate group-hover:text-indigo-600 transition-colors duration-200">{{ product.name }}</h5>
                      <p class="text-xs text-red-500 font-semibold">¥{{ product.price }}</p>
                    </div>
                  </div>
                  <div v-else class="text-center py-8 text-gray-500">
                    <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                    </svg>
                    <p class="text-sm">暂无商品</p>
                  </div>
                </div>

                <!-- 操作按钮 -->
                <div class="flex space-x-3">
                  <button @click="handleViewAllProducts(store.id)"
                          class="flex-1 bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-3 px-4 rounded-xl transition-colors duration-200">
                    <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
                    </svg>
                    查看店铺
                  </button>

                </div>
              </div>
            </div>
          </div>

          <!-- 加载更多 -->
          <div v-if="!loading && hasMore" class="text-center py-8">
            <button @click="loadMore" 
                    class="bg-white hover:bg-gray-50 text-gray-700 font-medium py-3 px-8 rounded-xl shadow-md hover:shadow-lg transition-all duration-200">
              加载更多店铺
            </button>
          </div>
        </div>

        <!-- 右侧区域 (3列) -->
        <div class="lg:col-span-3 space-y-6">
          <!-- 我的订单 -->
          <div class="bg-white rounded-2xl shadow-lg p-6">
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                <svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                </svg>
                我的订单
              </h3>
              <button class="text-sm text-indigo-500 hover:text-indigo-600">查看全部</button>
            </div>
            <MyOrders :orders="orders" />
          </div>

          <!-- 购物车 -->
          <div class="bg-white rounded-2xl shadow-lg p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
              <svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5M7 13l2.5 5m6-5v5a2 2 0 11-4 0v-5m4 0V8a2 2 0 10-4 0v5.01"></path>
              </svg>
              购物车
              <span v-if="cartCount > 0" class="ml-2 bg-red-500 text-white text-xs rounded-full px-2 py-1">{{ cartCount }}</span>
            </h3>
            <div v-if="cartCount === 0" class="text-center py-8 text-gray-500">
              <svg class="w-12 h-12 mx-auto mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4m0 0L7 13m0 0l-2.5 5M7 13l2.5 5m6-5v5a2 2 0 11-4 0v-5m4 0V8a2 2 0 10-4 0v5.01"></path>
              </svg>
              <p class="text-sm">购物车是空的</p>
              <p class="text-xs text-gray-400 mt-1">快去挑选心仪的商品吧</p>
            </div>
          </div>

          <!-- 优惠活动 -->
          <div class="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl shadow-lg p-6 text-white">
            <h3 class="text-lg font-semibold mb-3 flex items-center">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
              </svg>
              限时优惠
            </h3>
            <div class="space-y-3">
              <div class="bg-white/20 backdrop-blur-sm rounded-xl p-3">
                <div class="flex justify-between items-center">
                  <span class="font-medium">新用户专享</span>
                  <span class="bg-white text-orange-500 px-2 py-1 rounded-full text-xs font-bold">8折</span>
                </div>
                <p class="text-sm opacity-90 mt-1">首次购买享受8折优惠</p>
              </div>
              <div class="bg-white/20 backdrop-blur-sm rounded-xl p-3">
                <div class="flex justify-between items-center">
                  <span class="font-medium">满减活动</span>
                  <span class="bg-white text-orange-500 px-2 py-1 rounded-full text-xs font-bold">-20</span>
                </div>
                <p class="text-sm opacity-90 mt-1">满100减20，多买多省</p>
              </div>
            </div>
          </div>
        </div>

      </div>
    </main>
  </div>
</template>

<script>
import StoreInfoCard from '@/components/StoreInfoCard.vue'
import MyOrders from '@/components/MyOrders.vue'
import { getStores, getOrders } from '@/api/store'

export default {
  name: 'Store',
  components: {
    StoreInfoCard,
    MyOrders
  },
  data() {
    return {
      loading: true,
      stores: [],
      orders: {
        ongoing: [],
        completed: []
      },
      selectedCategory: 'all',
      cartCount: 0,
      hasMore: true,
      categories: [
        { id: 'all', name: '全部店铺', icon: '🏪', count: 156 },
        { id: 'food', name: '美食餐饮', icon: '🍜', count: 45 },
        { id: 'daily', name: '日用百货', icon: '🛒', count: 32 },
        { id: 'fresh', name: '生鲜果蔬', icon: '🥬', count: 28 },
        { id: 'service', name: '生活服务', icon: '🔧', count: 21 },
        { id: 'digital', name: '数码电器', icon: '📱', count: 18 },
        { id: 'clothing', name: '服装配饰', icon: '👕', count: 12 }
      ],
      hotStores: [
        {
          id: 1,
          name: '小李便利店',
          category: '日用百货',
          avatar: 'https://images.unsplash.com/photo-1556740738-b6a63e27c4df?w=100',
          rating: 4.8,
          sales: '月销1.2k'
        },
        {
          id: 2,
          name: '阿姨水果摊',
          category: '生鲜果蔬',
          avatar: 'https://images.unsplash.com/photo-1542838132-92c53300491e?w=100',
          rating: 4.9,
          sales: '月销800'
        },
        {
          id: 3,
          name: '老王修理铺',
          category: '生活服务',
          avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100',
          rating: 4.7,
          sales: '月销200'
        }
      ]
    }
  },
  computed: {
    filteredStores() {
      if (this.selectedCategory === 'all') {
        return this.stores
      }
      return this.stores.filter(store => store.category === this.selectedCategory)
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      try {
        this.loading = true
        const [storesRes, ordersRes] = await Promise.all([getStores(), getOrders()])
        if (storesRes.code === 200) {
          this.stores = storesRes.data.map(store => ({
            ...store,
            // 使用mock数据中的products字段，确保有足够的商品用于显示
            hotProducts: store.products || [],
            // 添加缺失的字段
            avatar: store.owner?.avatar || 'https://images.unsplash.com/photo-1556740738-b6a63e27c4df?w=100',
            coverImage: store.coverImage || 'https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=800',
            rating: store.rating || (4.0 + Math.random() * 1).toFixed(1),
            sales: store.sales || Math.floor(Math.random() * 1000) + 100,
            products: store.products?.length || 0,
            followers: store.followers || Math.floor(Math.random() * 500) + 50,
            category: store.category || 'fresh',
            isFollowing: false,
            isHot: Math.random() > 0.7
          }))
        }
        if (ordersRes.code === 200) {
          this.orders = ordersRes.data
        }
      } catch (error) {
        console.error('获取店铺数据失败:', error)
      } finally {
        this.loading = false
      }
    },
    
    handleFollowStore({ storeId, following }) {
      const store = this.stores.find(s => s.id === storeId)
      if (store) {
        store.isFollowing = following
        store.followers += following ? 1 : -1
      }
      
      console.log(`${following ? '关注' : '取消关注'}店铺: ${storeId}`)
      
      this.$message ? 
        this.$message.success(`${following ? '已关注' : '已取消关注'}店铺`) : 
        alert(`${following ? '已关注' : '已取消关注'}店铺`)
    },
    
    handleViewAllProducts(storeId) {
      console.log(`查看店铺 ${storeId} 的所有商品`)
      
      this.$router && this.$router.push({
        name: 'StoreDetail',
        query: { id: storeId }
      })
    },

    handleViewStore(storeId) {
      this.handleViewAllProducts(storeId)
    },

    handleViewProduct(productId, storeId) {
      console.log(`查看商品详情: ${productId}, 店铺ID: ${storeId}`)
      // 可以跳转到商品详情页
      this.$router && this.$router.push({
        name: 'ProductDetail',
        query: { 
          productId: productId,
          storeId: storeId
        }
      })
    },

    handleImageError(event) {
      // 图片加载失败时显示默认图片
      event.target.src = 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=200'
    },

    handleContactStore(storeId) {
      console.log(`联系店铺: ${storeId}`)
      // 可以打开聊天窗口或显示联系方式
      alert('联系功能开发中...')
    },
    
    handleAddToCart({ storeId, product }) {
      this.cartCount++
      console.log(`添加商品 ${product.name} 到购物车，店铺ID: ${storeId}`)
      
      this.$message ? 
        this.$message.success(`已添加 ${product.name} 到购物车`) : 
        alert(`已添加 ${product.name} 到购物车`)
    },

    loadMore() {
      // 模拟加载更多数据
      console.log('加载更多店铺...')
      // 实际应用中这里应该调用API加载更多数据
    }
  }
}
</script>

<style scoped>
/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* 卡片悬停效果 */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}


/* 图片加载效果 */
.aspect-square img {
  transition: opacity 0.3s ease-in-out;
}

/* 商品卡片悬停效果 */
.group:hover {
  z-index: 10;
}

</style>